import React from 'react';
import Box, { BoxProps } from '@/internals/Box';
import { useStyles } from '@/internals/hooks';
import { forwardRef } from '@/internals/utils';

export interface TimelineItemProps extends BoxProps {
  /**
   * Whether the last item
   *
   * @internal
   * This props is supposed to be used only by Timeline component internally
   * User should never rely on this prop
   *
   * @deprecated
   * This prop was used to indicate whether an item is the last item so that it gets highlighted.
   * Now we can specify whether an item should be highlighted individually.
   * Use {@link INTERNAL_active} instead
   */
  last?: boolean;

  /** Customizing the Timeline item */
  dot?: React.ReactNode;

  /** The content of the component */
  children?: React.ReactNode;

  /** You can use a custom element type for this component */
  as?: React.ElementType;

  /** Customized time of timeline  **/
  time?: React.ReactNode;

  /**
   * @internal
   * This props is supposed to be used only by Timeline component internally
   * User should never rely on this prop
   */
  INTERNAL_active?: boolean;
}

/**
 * The `Timeline.Item` component is used to set the layout of the child element in the `Timeline` component.
 *
 * @see https://rsuitejs.com/compo◊nents/timeline
 */
const TimelineItem = forwardRef<'div', TimelineItemProps>((props, ref) => {
  const {
    as = 'li',
    children,
    classPrefix = 'timeline-item',
    last: DEPRECATED_last,
    className,
    dot,
    time,
    INTERNAL_active,
    ...rest
  } = props;
  const { merge, withPrefix, prefix } = useStyles(classPrefix);
  const classes = merge(className, withPrefix({ last: DEPRECATED_last, active: INTERNAL_active }));
  return (
    <Box as={as} ref={ref} className={classes} {...rest}>
      <span className={prefix('tail')} />
      <span className={prefix('dot', { 'custom-dot': dot })}>{dot}</span>
      {time && <div className={prefix('time')}>{time}</div>}
      <div className={prefix('content')}>{children}</div>
    </Box>
  );
});

TimelineItem.displayName = 'TimelineItem';

export default TimelineItem;
